<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define central point and dimensions
        const cx = 300;
        const cy = 170;
        const L_pixels = 160;
        const ringRadiusX = 60;
        const ringRadiusY = 110;
        const pointChargeRadius = 4;

        // Set drawing styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // 1. Draw the x-axis
        const axisStart = cx - 250;
        const axisEnd = cx + 250;
        ctx.beginPath();
        ctx.moveTo(axisStart, cy);
        ctx.lineTo(axisEnd, cy);
        ctx.stroke();

        // Draw the arrowhead for the x-axis
        ctx.beginPath();
        ctx.moveTo(axisEnd, cy);
        ctx.lineTo(axisEnd - 12, cy - 6);
        ctx.moveTo(axisEnd, cy);
        ctx.lineTo(axisEnd - 12, cy + 6);
        ctx.stroke();

        // Label the x-axis
        ctx.fillText('x', axisEnd + 20, cy);

        // 2. Draw the two point charges
        // Charge at -L
        ctx.beginPath();
        ctx.arc(cx - L_pixels, cy, pointChargeRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Charge at +L
        ctx.beginPath();
        ctx.arc(cx + L_pixels, cy, pointChargeRadius, 0, 2 * Math.PI);
        ctx.fill();

        // 3. Draw the ring (as an ellipse for perspective)
        ctx.beginPath();
        ctx.ellipse(cx, cy, ringRadiusX, ringRadiusY, 0, 0, 2 * Math.PI);
        ctx.stroke();

        // 4. Draw the dashed line for the radius R
        const angleR = (5 * Math.PI) / 4; // To the bottom-left quadrant
        const endXR = cx + ringRadiusX * Math.cos(angleR);
        const endYR = cy + ringRadiusY * Math.sin(angleR);
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(cx, cy);
        ctx.lineTo(endXR, endYR);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // 5. Add all the labels
        // Label O for the origin
        ctx.fillText('O', cx + 5, cy - 15);

        // Labels for the point charges
        ctx.textBaseline = 'bottom';
        ctx.fillText('Q', cx - L_pixels, cy - 10);
        ctx.fillText('Q', cx + L_pixels, cy - 10);

        ctx.textBaseline = 'top';
        ctx.fillText('-L', cx - L_pixels, cy + 10);
        ctx.fillText('L', cx + L_pixels, cy + 10);

        // Label for the ring (m, q)
        ctx.textBaseline = 'bottom';
        ctx.fillText('m,q', cx, cy - ringRadiusY - 10);

        // Label for the radius R
        ctx.textAlign = 'left';
        ctx.textBaseline = 'bottom';
        ctx.fillText('R', endXR - 25, endYR + 15);
        
        // 6. Add the caption
        ctx.font = '20px "SimSun"'; // Font for Chinese characters
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('电图 1.14.1', cx, canvas.height - 20);

    </script>
</body>
</html>